<script setup>
    import { getOverviewDetails, getOverviewEdit } from '@/api/home'

    let form = $ref({})
    let dataLoading = $ref(false)
    let showDialog = $ref(false)
    let btnLoading = $ref(false)

    const showOverviewForm = () => {
        showDialog = true
        dataLoading = true
        getOverviewDetails().then(res => {
            dataLoading = false
            form = res.result
        })
    }

    // 保存
    const handleClickSave = () => {
        let { sum, online } = form

        if(Number(sum) < Number(online)){
            ElMessage.error('设备在线数不能大于总数~')
            return
        }

        btnLoading = true
        getOverviewEdit(form).then(res => {
            btnLoading = false
            if(res.success){
                ElMessage.success('提交成功~')
                showDialog = false
            }
        })
    }

    defineExpose({
        showOverviewForm
    })


</script>

<template>
    <el-dialog
        width="562px"
        title="设备总览编辑"
        v-model="showDialog"
        custom-class="form-dialog"
    >
        <div class="form-item" v-loading="dataLoading">

            <div class="form-row">
                <div class="title">设备总数</div>
                <div class="input-wrap">
                    <el-input-number :controls="false" v-model="form.sum" />
                    <span class="label">%</span>
                </div>
            </div>

            <div class="form-row">
                <div class="title">设备离线</div>
                <div class="input-wrap">
                    <el-input-number :controls="false" v-model="form.online" />
                    <span class="label">%</span>
                </div>
            </div>

        </div>

        <template #footer>
            <span class="dialog-footer flex-center">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="handleClickSave" 
                    :loading="btnLoading"
                >保存</el-button>
            </span>
        </template>
                
    </el-dialog>
</template>